<template>
  <div class="container-mapInformation">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>快递信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区域 -->
    <div class="mainBox">
      <div class="mainTitle">快递信息数据</div>
      <!-- 快递单号查询 -->
      <div class="courierNumber">
        <!-- 快递公司选择 -->
        <el-select v-model="chooseCourier" filterable placeholder="请选择" >
          <el-option
            v-for="item in courierList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="phone"
          v-show="chooseCourier === 'SFEXPRESS'"
          placeholder="请输入电话号码"
          style="width: 150px"
        ></el-input>
        <el-input v-model="order" placeholder="请输入快递单号"></el-input>
        <!-- 地图显示区 -->
        <div class="scott">
          <!-- <scott-map :mapDetailList="mapDetailList" class="scott"></scott-map> -->
          <!-- <s-map class="scott"></s-map> -->
          <sco-map :mapDetailList="mapDetailList" class="scott"></sco-map>
        </div>
        <el-button type="primary" plain size="small" @click="searchInfo"
          >查询</el-button
        >
      </div>
      <!-- 按钮 -->
      <div class="mainEditor">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="deleteInformation"
          >删除</el-button
        >
      </div>
      <div class="mainTable">
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          class="tabalBox"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column prop="id" label="id" width="55"> </el-table-column> -->
          <el-table-column prop="courierCompany" label="快递名"> </el-table-column>
          <el-table-column
            prop="courierNumber"
            label="快递单号"
          ></el-table-column>
          <el-table-column prop="provenance" label="始发地"> </el-table-column>
          <el-table-column label="发货时间">
            <template slot-scope="scope">
              <span>
                {{ scope.row.deliveryTime | formateTime }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="签收时间">
             <template slot-scope="scope">
              <span v-if="scope.row.signTime">
                {{ scope.row.signTime | formateTime }}
              </span>
              <span v-else>
                未签收
              </span>
            </template>
          </el-table-column>
          <el-table-column label="物流详情" width="160">
            <template slot-scope="scope">
              <el-popover placement="left" width="450" trigger="click">
                <logistic-detail :detail-list="detailList"> </logistic-detail>
                <el-button
                  slot="reference"
                  size="mini"
                  @click="showDetail(scope.$index, scope.row)"
                  >详情</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button size="mini" disabled>编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="reqDetailsParams.pageNum"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="reqDetailsParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mapInformation',
  components: {
    // ScottMap: () => import('../../components/ScottMap'),
    // SMap: () => import('../../components/SMap'),
    ScoMap: () => import('../../components/scoMap'),
    LogisticDetail: () => import('./logisticDetail/logisticDetail')
  },
  data () {
    return {
      courierList: [],
      tableData: [],
      reqDetailsParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 显示详情
      dialogDetailVisible: false,
      total: null,
      currentPage: 4,
      // 快递单号
      order: '',
      isChecked: false,
      selectIndex: [],
      // 控制抽屉显示
      // drawer: false,
      // 选择快递名称
      chooseCourier: '',
      phone: null,
      dialogTableVisible: false,
      detailList: [],
      mapDetailList: [],
      loading: true

    }
  },
  created () {
    this.getLogisticDetailList()
  },
  methods: {
    // 获取物流列表数据
    async getLogisticDetailList () {
      const res1 = await this.$http.get('/api/platApi/wuLiu/sysExpressCompany/listData')
      this.courierList = res1.data.data
      const res = await this.$http.get('/api/platApi/wuLiu/expressInformationData/list', { params: this.reqDetailsParams })
      if (res.status === 200 && res.data.code === 1) {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.loading = false
      } else {
        this.$message.error('加载数据失败')
        this.loading = false
      }
    },
    // 点击删除按钮，删除对应选项
    handleDelete (index, val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 执行删除操作
          const res = await this.$http.get('/api/platApi/wuLiu/expressInformationData/deleteById', { params: { id: val.id } })
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            if (this.total === ((this.reqDetailsParams.pageSize * (this.reqDetailsParams.pageNum - 1)) + 1)) {
              this.$nextTick(function () {
                this.reqDetailsParams.pageNum = this.reqDetailsParams.pageNum - 1
                this.getLogisticDetailList()
              })
            }
            this.getLogisticDetailList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 点击删除按钮
    deleteInformation () {
      if (!this.isChecked) {
        this.$message({
          message: '还没有选择要删除的内容',
          type: 'warning'
        })
      } else if (this.selectIndex.length > 1) {
        this.$message({
          message: '每次只能删除一条信息',
          type: 'warning'
        })
      } else {
      // 弹出提示框，将永久删除信息
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
          // 执行删除操作
            const res = await this.$http.get('/api/platApi/wuLiu/expressInformationData/deleteById', { params: { id: this.selectIndex[0] } })
            if (res.status === 200 && res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              if (this.total === ((this.reqDetailsParams.pageSize * (this.reqDetailsParams.pageNum - 1)) + 1)) {
                this.$nextTick(function () {
                  this.reqDetailsParams.pageNum = this.reqDetailsParams.pageNum - 1
                  this.getLogisticDetailList()
                })
              }
              this.getLogisticDetailList()
            } else {
              this.$message.error('删除失败')
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    handleSelectionChange (val) {
      if (val.length === 0) {
        this.isChecked = false
      } else {
        this.isChecked = true
        this.selectIndex = []
        val.forEach((item, i) => {
          this.selectIndex.push(item.id)
        })
      }
    },
    // 点击详情，显示物流详情时间线
    showDetail (index, value) {
      this.dialogDetailVisible = true
      this.dialogTableVisible = true
      this.detailList = JSON.parse(value.logisticsDetails)
      this.mapDetailList = JSON.parse(value.coordinates)
    },
    // 点击查询按钮
    async searchInfo () {
      const res = await this.$http.get('/api/platApi/wuLiu/expressInformationData/selectInformationData', {
        params: {
          code: this.chooseCourier,
          number: this.order,
          phone: this.phone
        }
      })
      if (res.status === 200 && res.data.code === 1) {
        this.$message({
          message: '查询成功',
          type: 'success'
        })
        this.mapDetailList = res.data.data
        this.getLogisticDetailList()
        this.chooseCourier = ''
        this.phone = null
        this.order = ''
      } else {
        this.$message({
          message: res.data.msg,
          type: 'error'
        })
      }
    },
    handleSizeChange (newSize) {
      this.reqDetailsParams.pageSize = newSize
      this.getLogisticDetailList()
    },
    handleCurrentChange (newPage) {
      this.reqDetailsParams.pageNum = newPage
      this.getLogisticDetailList()
    }
  }
}
</script>

<style scoped lang="less">
.container-mapInformation {
  .scott {
    position: absolute;
    right: 0;
    top: -15%;
    width: 500px;
    height: 350px;
    // background-color: rgb(185, 182, 182);
  }
}
.el-button {
  margin-top: 20px;
}
.courierNumber {
  margin-top: -10px;
  margin-bottom: 70px;
  .el-select {
    width: 10%;
    margin-right: 5px;
  }
  .el-input {
    display: inline-block;
    width: 30%;
    margin-right: 10px;
  }
}
.el-table {
  margin-top: 30PX;
  margin-bottom: 20px;
  /deep/thead {
    color: #333;
  }
  /deep/td {
    padding: 0 !important;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .el-button {
    margin: 5px;
  }
}
.el-dialog {
  width: 200px;
}
/deep/.el-popover{
  height: 200px!important;
  overflow: scroll!important;
}
</style>
